<script setup>
import {User, Lock, Key} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {apiGetCode, apiLogin} from "@/services";

const user = ref({
  "phone": "18511111111",
  "password": "12345678",
  "code": ""
})
// 图片的url
const imgUrl = ref('')
// 获取验证码
const getCode = async () => {
  const res = await apiGetCode()
  imgUrl.value = URL.createObjectURL(res.data)
  // console.log(URL.createObjectURL(res.data));
  console.log(res);
}
onMounted(() => {
  getCode()
})
// 登录功能
const login = async ()=>{
  console.log(await apiLogin(user.value));

}
</script>

<template>
  <div class="bg">
    <div class="left">
      <div class="hd">
        <div class="img">
          <img style="width: 25px; " src="@/assets/layout_logo.png" alt="">
        </div>
        <h2 class="border">黑马面面</h2>
        <h2>用户登录</h2>
      </div>
      <div class="form">
        <el-form :model="user">
          <el-form-item>
            <el-input v-model="user.phone" size="large" :prefix-icon="User" placeholder="请输入手机号"/>
          </el-form-item>
          <el-form-item>
            <el-input v-model="user.password" type="password" size="large" :prefix-icon="Lock"
                      placeholder="请输入密码"/>
          </el-form-item>
          <el-form-item>
            <div class="box">
              <el-input v-model="user.code" size="large" :prefix-icon="Key" placeholder="请输入验证码"></el-input>
              <img :src="imgUrl" alt="">
            </div>
          </el-form-item>
          <el-form-item>
            <input type="checkbox" value="同意">
            我已阅读并同意 <a href="">&nbsp;用户协议&nbsp;</a>和<a href="">&nbsp;隐私条款&nbsp;</a>
            <!--              <el-radio label="1" size="large"> </el-radio>-->
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;" size="large" type="primary" @click="login">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;" size="large" type="primary">注册</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <div class="right">
      <img src="@/assets/login-bg.png" alt="">
    </div>
  </div>
</template>

<style scoped lang="scss">

.bg {
  display: flex;
  //padding: 100px 120px;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #1493fa, #01c6fa);
  justify-content: space-evenly;
  align-items: center;

  .left {
    width: 478px;
    height: 550px;
    background-color: #f5f5f5;
    padding: 44px 42px;
    box-sizing: border-box;

    .hd {
      display: flex;
      align-items: center;
      margin-bottom: 30px;

      h2 {
        font-weight: 400;
        margin: 0 10px

      }

      .border {
        border-right: 2px solid #e7e7e7;
        padding-right: 15px;
      }
    }

    .el-form-item__content {
      a {
        text-decoration: none;
        color: #409eff;
      }
    }
    .box {
      display: flex;
      width: 100%;
      img {
        width: 110px;
        height: 42px;
      }
    }

    p {
      color: #606369;
      font-size: 14px;

    }
  }

  .right {
    width: 633px;
    height: 435px;


    img {
      width: 100%;
    }
  }
}

</style>
